<template>
  <g-pro-page-wrapper>
    <a-space>
      <a-radio-group v-model:value="state">
        <a-radio value="read">只读</a-radio>
        <a-radio value="edit">编辑</a-radio>
      </a-radio-group>
      简约模式
      <a-switch v-model:checked="plain" />
    </a-space>
    <Descriptions style="margin-top: 15px" :column="2">
      <DescriptionsItem label="空字符串">
        <g-pro-field text="" mode="read" />
      </DescriptionsItem>
      <DescriptionsItem label="头像">
        <g-pro-field
          text="https://avatars2.githubusercontent.com/u/8186664?s=60&v=4"
          mode="read"
          valueType="avatar"
        />
      </DescriptionsItem>
      <DescriptionsItem label="文本">
        <g-pro-field text="这是一段文本" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="图片">
        <g-pro-field
          text="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          valueType="image"
          :mode="state"
          :plain="plain"
        />
      </DescriptionsItem>
      <DescriptionsItem label="金额">
        <g-pro-field text="100" valueType="money" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="颜色">
        <g-pro-field text="#1099aa" valueType="color" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="数字">
        <g-pro-field text="19897979797979" valueType="digit" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="秒格式化">
        <g-pro-field text="2000000" valueType="second" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="百分比">
        <g-pro-field text="100" valueType="percent" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="评分">
        <g-pro-field text="3.5" valueType="rate" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="选择框">
        <g-pro-field
          light
          text="open"
          :mode="state"
          :valueEnum="{
            all: { text: '全部', disabled: true, status: 'Default' },
            open: {
              text: '未解决',
              status: 'Error'
            },
            closed: {
              text: '已解决',
              status: 'Success'
            },
            processing: {
              text: '解决中',
              status: 'Processing'
            }
          }"
        />
      </DescriptionsItem>
      <DescriptionsItem label="多选">
        <g-pro-field
          :text="['open', 'closed']"
          :mode="state"
          valueType="checkbox"
          :valueEnum="{
            all: { text: '全部', disabled: true, status: 'Default' },
            open: {
              text: '未解决',
              status: 'Error'
            },
            closed: {
              text: '已解决',
              status: 'Success'
            },
            processing: {
              text: '解决中',
              status: 'Processing'
            }
          }"
        />
      </DescriptionsItem>
      <DescriptionsItem label="多选 labelInValue">
        <g-pro-field
          :text="[
            {
              value: 'open1',
              label: '打开'
            },
            {
              value: 'closed2',
              label: '关闭'
            }
          ]"
          :mode="state"
          valueType="checkbox"
          :valueEnum="{
            all: { text: '全部', disabled: true, status: 'Default' },
            open: {
              text: '未解决',
              status: 'Error'
            },
            closed: {
              text: '已解决',
              status: 'Success'
            },
            processing: {
              text: '解决中',
              status: 'Processing'
            }
          }"
        />
      </DescriptionsItem>
      <DescriptionsItem label="单选">
        <g-pro-field
          text="open"
          :mode="state"
          valueType="radio"
          :valueEnum="{
            all: { text: '全部', disabled: true, status: 'Default' },
            open: {
              text: '未解决',
              status: 'Error'
            },
            closed: {
              text: '已解决',
              status: 'Success'
            },
            processing: {
              text: '解决中',
              status: 'Processing'
            }
          }"
        />
      </DescriptionsItem>
      <DescriptionsItem label="单选按钮">
        <g-pro-field
          text="open"
          :mode="state"
          valueType="radioButton"
          :valueEnum="{
            all: { text: '全部', disabled: true, status: 'Default' },
            open: {
              text: '未解决',
              status: 'Error'
            },
            closed: {
              text: '已解决',
              status: 'Success'
            },
            processing: {
              text: '解决中',
              status: 'Processing'
            }
          }"
        />
      </DescriptionsItem>
      <DescriptionsItem label="远程选择框">
        <g-pro-field
          text="open"
          valueType="select"
          :mode="state"
          :request="
            async () => [
              { label: '全部', value: 'all' },
              { label: '未解决', value: 'open' },
              { label: '已解决', value: 'closed' },
              { label: '解决中', value: 'processing' },
              {
                label: '特殊选项',
                value: 'optGroup',
                optionType: 'optGroup',
                options: [
                  { label: '不解决', value: 'no' },
                  { label: '已废弃', value: 'clear' }
                ]
              }
            ]
          "
        />
      </DescriptionsItem>
      <DescriptionsItem label="级联选择框">
        <g-pro-field
          :text="['zhejiang', 'hangzhou', 'xihu']"
          valueType="cascader"
          :mode="state"
          :request="
            async () => [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake'
                      }
                    ]
                  }
                ]
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men'
                      }
                    ]
                  }
                ]
              }
            ]
          "
        />
      </DescriptionsItem>
      <DescriptionsItem label="进度条">
        <g-pro-field text="40" valueType="progress" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="百分比">
        <a-space>
          <g-pro-field
            :text="10"
            :valueType="{
              type: 'percent',
              showSymbol: true,
              showColor: true
            }"
            mode="read"
          />
          <g-pro-field
            :text="0"
            :valueType="{
              type: 'percent',
              showSymbol: true,
              showColor: true
            }"
            mode="read"
          />
          <g-pro-field
            :text="-10"
            :valueType="{
              type: 'percent',
              showSymbol: true,
              showColor: true
            }"
            mode="read"
          />
        </a-space>
      </DescriptionsItem>
      <DescriptionsItem label="日期时间">
        <g-pro-field :text="dateTime" valueType="dateTime" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="相对于当前时间">
        <a-space>
          <g-pro-field :text="dateTime" valueType="fromNow" :mode="state" :plain="plain" />
          <g-pro-field
            :text="dayjs('2013-11-16 12:50:26').valueOf()"
            valueType="fromNow"
            :mode="state"
            :plain="plain"
          />
        </a-space>
      </DescriptionsItem>
      <DescriptionsItem label="日期">
        <g-pro-field :text="dateTime" valueType="date" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="日期:周">
        <g-pro-field :text="dateTime" valueType="dateWeek" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="日期:月">
        <g-pro-field :text="dateTime" valueType="dateMonth" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="日期:季度">
        <g-pro-field
          :text="dayjs().valueOf()"
          valueType="dateQuarter"
          :mode="state"
          :plain="plain"
        />
      </DescriptionsItem>
      <DescriptionsItem label="日期:年">
        <g-pro-field :text="dayjs().valueOf()" valueType="dateYear" :mode="state" :plain="plain" />
      </DescriptionsItem>
      <DescriptionsItem label="日期区间">
        <g-pro-field
          :text="[
            dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
            dayjs('2019-11-16 12:50:26').valueOf()
          ]"
          valueType="dateRange"
          :mode="state"
          :plain="plain"
        />
      </DescriptionsItem>
      <DescriptionsItem label="日期时间区间">
        <g-pro-field
          :text="[
            dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
            dayjs('2019-11-16 12:50:26').valueOf()
          ]"
          valueType="dateTimeRange"
          :mode="state"
          :plain="plain"
        />
      </DescriptionsItem>
      <DescriptionsItem label="时间">
        <g-pro-field
          :text="dayjs('2019-11-16 12:50:26').valueOf()"
          valueType="time"
          :mode="state"
          :plain="plain"
        />
      </DescriptionsItem>
      <!--<DescriptionsItem label="时间区间">-->
      <!--  <g-pro-field-->
      <!--    :text="[-->
      <!--      moment('2019-11-16 12:50:26').add(-1, 'd').valueOf(),-->
      <!--      moment('2019-11-16 12:50:26').valueOf(),-->
      <!--    ]"-->
      <!--    valueType="timeRange"-->
      <!--    :mode="state"-->
      <!--    :plain="plain"-->
      <!--  />-->
      <!--</DescriptionsItem>-->
      <DescriptionsItem label="代码块">
        <g-pro-field
          :text="`
            yarn run v1.22.0
            $ eslint --format=pretty ./packages
            Done in 9.70s.
          `"
          valueType="code"
          :mode="state"
          :plain="plain"
        />
      </DescriptionsItem>
      <DescriptionsItem label="代码块">
        <g-pro-field :text="jsonCode" valueType="jsonCode" :mode="state" :plain="plain" />
      </DescriptionsItem>
    </Descriptions>
  </g-pro-page-wrapper>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { Descriptions } from 'ant-design-vue'

const DescriptionsItem = Descriptions.Item

const state = ref('read')
const plain = ref(false)
const dateTime = dayjs('2019-11-16 12:50:26').valueOf()
const jsonCode = `{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "skipLibCheck": true
  },
  "include": ["**/src", "**/docs", "scripts", "**/demo", ".eslintrc.js"]
}
`
</script>

<style lang="less" module></style>
